<template>
  <div class="app-container site-edit-container">
    <!-- 信息卡片 -->
    <el-card class="info-card">
      <!-- 站点信息 -->
      <el-descriptions :title="detailInfo.stationName" column="1">
        <el-descriptions-item label="充电桩编号">{{
          detailInfo.id
        }}</el-descriptions-item>
        <el-descriptions-item label="设备类型">{{
          detailInfo.deviceType
        }}</el-descriptions-item>
        <el-descriptions-item label="在线状态">{{
          onlineStatusMap[detailInfo.onlineStatus]
        }}</el-descriptions-item>
        <el-descriptions-item label="设备状态">{{
          deviceStatusMap[detailInfo.deviceStatus]
        }}</el-descriptions-item>
        <el-descriptions-item label="到期时间">{{
          detailInfo.expireTime
        }}</el-descriptions-item>
        <el-descriptions-item label="最近连接时间">{{
          detailInfo.lastHeartbeatTime
        }}</el-descriptions-item>
        <div slot="extra">
          <el-button
            size="small"
            type="text"
            icon="el-icon-edit"
            @click="handleEdit"
            >修改</el-button
          >
        </div>
      </el-descriptions>
    </el-card>
    <!-- 表格卡片 -->
    <el-card class="table-card">
      <el-tabs v-model="tab_name">
        <!-- 收费模式 -->
        <el-tab-pane label="收费模式" name="chargeStrategy">
          <ChargeStrategyDesc :chargeForm="chargeStrategy"></ChargeStrategyDesc>
        </el-tab-pane>
        <!-- 远程参数配置 -->
        <el-tab-pane label="远程参数配置" name="tcpConfig">
          <el-button
            style="margin-bottom: 10px"
            size="normal"
            type="text"
            icon="el-icon-edit"
            @click="handleTcp"
            >参数配置下发</el-button
          >
          <el-table :data="tcpData" border style="width: 100%" stripe>
            <el-table-column prop="label" label="参数" width="180">
            </el-table-column>
            <el-table-column prop="value" label="参数配置下发">
            </el-table-column>
            <el-table-column prop="reference_value" label="参考值">
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <!-- 修改站点 -->
    <EditModal
      title="修改设备"
      :isEdit="true"
      :data="detailInfo"
      :siteList="siteList"
      :visible="editVisible"
      @success="onEditSuccess"
      @cancel="onEditCancel"
    ></EditModal>

    <!-- 参数配置下发 -->
    <el-dialog
      title="参数配置下发"
      :visible.sync="tcpVisible"
      width="600px"
      append-to-body
      :close-on-click-modal="false"
      @close="tcpVisible = false"
    >
      <el-form
        ref="tcpForm"
        :model="tcpForm"
        :rules="tcpRules"
        label-width="100px"
        size="small"
      >
        <!-- 涓流功率 -->
        <el-form-item
          style="margin-bottom: 0px"
          label="涓流功率"
          prop="Full_charge_power"
        >
          <el-input
            v-model="tcpForm.Full_charge_power"
            placeholder="请输入涓流功率"
          >
            <span slot="suffix"> W </span>
          </el-input>
          <div class="tcp-input-tip">参考值: 0.1-50W</div>
        </el-form-item>
        <!-- 涓流时间 -->
        <el-form-item
          style="margin-bottom: 0px"
          label="涓流时间"
          prop="FULL_Charge_Delay"
        >
          <el-input
            v-model="tcpForm.FULL_Charge_Delay"
            placeholder="请输入涓流时间"
          >
            <span slot="suffix"> 分钟 </span>
          </el-input>
          <div class="tcp-input-tip">参考值: 1-180分钟</div>
        </el-form-item>
        <!-- 过流阈值 -->
        <el-form-item
          style="margin-bottom: 0px"
          label="过流阈值"
          prop="Threshold_I"
        >
          <el-input v-model="tcpForm.Threshold_I" placeholder="请输入过流阈值">
            <span slot="suffix"> A </span>
          </el-input>
          <div class="tcp-input-tip">
            参考值: 0-11.5A
            【风险提示：调大过流阈值前，请确认插座电线能承受相应的功率，否则可能导致电线烧毁】
          </div>
        </el-form-item>
        <!-- 过载阈值 -->
        <el-form-item
          style="margin-bottom: 0px"
          label="过载阈值"
          prop="Threshold_P"
        >
          <el-input v-model="tcpForm.Threshold_P" placeholder="请输入过载阈值">
            <span slot="suffix"> W </span>
          </el-input>
          <div class="tcp-input-tip">参考值: 0-2200W</div>
        </el-form-item>
        <!-- 空载功率阈值 -->
        <el-form-item
          style="margin-bottom: 0px"
          label="空载功率阈值"
          prop="Null_charge_power"
        >
          <el-input
            v-model="tcpForm.Null_charge_power"
            placeholder="请输入空载功率阈值"
          >
            <span slot="suffix"> W </span>
          </el-input>
          <div class="tcp-input-tip">参考值: 0.1-5W</div>
        </el-form-item>
        <!-- 空载延时时间 -->
        <el-form-item
          style="margin-bottom: 0px"
          label="空载延时时间"
          prop="NULL_Charege_Delay"
        >
          <el-input
            v-model="tcpForm.NULL_Charege_Delay"
            placeholder="请输入空载延时时间"
          >
            <span slot="suffix"> 秒 </span>
          </el-input>
          <div class="tcp-input-tip">参考值: 2-1800秒</div>
        </el-form-item>
        <!-- 高温阈值 -->
        <el-form-item
          style="margin-bottom: 0px"
          label="高温阈值"
          prop="Temp_threshold"
        >
          <el-input
            v-model="tcpForm.Temp_threshold"
            placeholder="请输入高温阈值"
          >
            <span slot="suffix"> ℃ </span>
          </el-input>
          <div class="tcp-input-tip">参考值: 0-255℃</div>
        </el-form-item>
        <!-- 最大充电时间 -->
        <el-form-item
          style="margin-bottom: 0px"
          label="最大充电时间"
          prop="Max_Charge_Time"
        >
          <el-input
            v-model="tcpForm.Max_Charge_Time"
            placeholder="请输入最大充电时间"
          >
            <span slot="suffix"> 分钟 </span>
          </el-input>
          <div class="tcp-input-tip">参考值: 1-900分钟</div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitTcpForm">确 定</el-button>
        <el-button @click="cancelTcp">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import EditModal from "./components/EditModal";
import ChargeStrategyDesc from "@/components/ChargeStrategyDesc";
import { getListAPI as getSiteListAPI } from "@/api/charge/site";
import { getListAPI, updateTcpConfigAPI } from "@/api/charge/station";

export default {
  components: { EditModal, ChargeStrategyDesc },
  data() {
    return {
      tab_name: "chargeStrategy",
      editVisible: false,
      siteId: "",
      stationName: "",

      // 站点详情
      detailInfo: {},
      // 站点充电策略
      chargeStrategy: {},

      chargeModeMap: {
        FREE: "免费",
        FEE: "收费",
      },
      billTypeMap: {
        ELEC: "电量收费",
        FIXED: "固定收费",
        STEP: "阶梯收费",
      },
      deviceStatusMap: {
        NORMAL: "正常",
        BREAK: "故障",
      },
      onlineStatusMap: {
        ONLINE: "在线",
        OFFLINE: "离线",
        UNREGISTER: "未注册",
      },

      // 全部站点列表
      siteList: [],

      tcpData: [
        {
          label: "涓流功率",
          value: "",
          reference_value: "0.1-50W",
        },
        {
          label: "涓流时间",
          value: "",
          reference_value: "1-180分钟",
        },
        {
          label: "过流阈值",
          value: "",
          reference_value: "0-11.5A",
        },
        {
          label: "过载阈值",
          value: "",
          reference_value: "0-2200W",
        },
        {
          label: "空载功率阈值",
          value: "",
          reference_value: "0.1-5W",
        },
        {
          label: "空载延时时间",
          value: "",
          reference_value: "2-1800秒",
        },
        {
          label: "高温阈值",
          value: "",
          reference_value: "0-255℃",
        },
        {
          label: "最大充电时间",
          value: "",
          reference_value: "1-900分钟",
        },
      ],
      tcpVisible: false,
      tcpForm: {},
      tcpRules: [],
    };
  },
  created() {
    this.siteId = this.$route.query.siteId;
    this.stationName = this.$route.query.stationName;
    this.id = this.$route.query.id;
    this.getDetail();
    this.getSiteList();
  },
  methods: {
    // 查询全部站点
    getSiteList() {
      getSiteListAPI({
        pageNum: "1",
        pageSize: "500",
      }).then((res) => {
        this.siteList = res.rows;
      });
    },
    // 编辑成功回调
    onEditSuccess() {
      this.getDetail();
      this.editVisible = false;
    },
    // 编辑关闭回调
    onEditCancel() {
      this.editVisible = false;
    },
    // 修改站点信息
    handleEdit() {
      this.editVisible = true;
    },
    // 查询站点详情
    getDetail() {
      getListAPI({
        pageSize: 1,
        pageNum: 1,
        siteId: this.siteId,
        stationName: this.stationName,
        id: this.id,
      }).then((res) => {
        this.detailInfo = res.rows[0] || {};

        // 收费模式
        this.chargeStrategy = this.detailInfo.chargeStrategy
          ? JSON.parse(this.detailInfo.chargeStrategy)
          : {};

        console.log("看下收费模式", this.chargeStrategy)

        // 远程参数配置
        this.tcpForm = this.detailInfo.tcpConfig
          ? JSON.parse(this.detailInfo.tcpConfig)
          : {};

        this.tcpData[0].value = this.tcpForm.Full_charge_power
          ? this.tcpForm.Full_charge_power + "W"
          : "";
        this.tcpData[1].value = this.tcpForm.FULL_Charge_Delay
          ? this.tcpForm.FULL_Charge_Delay + "分钟"
          : "";
        this.tcpData[2].value = this.tcpForm.Threshold_I
          ? this.tcpForm.Threshold_I + "A"
          : "";
        this.tcpData[3].value = this.tcpForm.Threshold_P
          ? this.tcpForm.Threshold_P + "W"
          : "";
        this.tcpData[4].value = this.tcpForm.Null_charge_power
          ? this.tcpForm.Null_charge_power + "W"
          : "";
        this.tcpData[5].value = this.tcpForm.NULL_Charege_Delay
          ? this.tcpForm.NULL_Charege_Delay + "秒"
          : "";
        this.tcpData[6].value = this.tcpForm.Temp_threshold
          ? this.tcpForm.Temp_threshold + "℃"
          : "";
        this.tcpData[7].value = this.tcpForm.Max_Charge_Time
          ? this.tcpForm.Max_Charge_Time + "分钟"
          : "";
      });
    },
    handleTcp() {
      this.tcpForm = this.detailInfo.tcpConfig
        ? JSON.parse(this.detailInfo.tcpConfig)
        : {};
      this.tcpVisible = true;
    },
    // 参数配置下发
    submitTcpForm() {
      updateTcpConfigAPI({
        id: this.detailInfo.id,
        tcpConfig: JSON.stringify(this.tcpForm),
      }).then((res) => {
        this.$modal.msgSuccess("参数配置下发成功");
        this.getDetail();
        this.tcpVisible = false;
      });
    },
    cancelTcp() {
      this.tcpVisible = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.site-edit-container {
  display: flex;
}
.info-card {
  height: 100%;
  width: 20%;
  overflow: auto;
  margin-right: 20px;
  flex: 1;
}
.table-card {
  height: 100%;
  width: 80%;
  overflow: auto;
  flex: 3;
  .stat-content {
    width: 50%;
    flex: auto;
    .stat-item {
      margin: 5px 0;
    }
  }
  .divider {
    flex: none;
    height: 60px;
    width: 1px;
    background-color: #efefef;
    margin: 0 20px;
  }
}
.point {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  &.primary {
    background-color: #409eff;
  }
  &.success {
    background-color: #67c23a;
  }
  &.warning {
    background-color: #e6a23c;
  }
  &.danger {
    background-color: #f56c6c;
  }
  &.info {
    background-color: #909399;
  }
}
.tcp-input-tip {
  color: #999;
  font-size: 13px;
  line-height: 20px;
  margin: 5px 0;
}
</style>
